<template>
	<view class="uni-flex uni-column">
		<view  v-for="(item,index) in data" :key="item.id">
			<view class="flex-item uni-panel" v-if="item.type==='image'" @click="goImage(item.src)">
				<text class="uni-panel-title">{{ item.title }}</text>
				<view class="uni-panel-content">
					<image :src="item.src" ></image>
				</view>
				<text class="uni-panel-icon uni-icon">&#xe470;</text>
			</view>
			
			<view class="flex-item uni-panel"  v-if="item.type==='text'" @click="goPage(item.page)">
				<text class="uni-panel-title">{{ item.title }}</text>
				<view class="uni-panel-content">
					<text class="uni-panel-text">{{ item.text }}</text>
				</view>
				<text v-if="(item.page && item.page!= '')" class="uni-panel-icon uni-icon">&#xe470;</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import mButton from "@/components/m-button/m-button.vue"
	export default {
		components:{
			mButton
		},
		data() {
			return {
				
			};
		},
		props: { // 传递值的定义
			data: {
				type: Array,
				value:[]
			}
		},
		methods:{
			goImage(e){
				if(e && e!=""){
					// 图片预览
					uni.navigateTo({
						url:"/components/m-panel/m-image?src=" + encodeURIComponent(JSON.stringify(e))
					})
				}
			},
			goPage(e){
				if(e && e!=""){
					uni.navigateTo({
						url: e
					})
				}
			}
		}
	}
</script>

<style>
.flex-item{
		padding: 0 5%;
	}
	.uni-panel{
		background-color: #FFFFFF;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		margin-bottom:5px;
		padding: 5%;
	}
	.uni-panel .uni-panel-title{
		font-weight: bold;
		width: 20%;
		font-size: 12px;
	}
	.uni-panel .uni-panel-content{
		font-size: 12px;
		width: 70%;
		text-align: right;
		letter-spacing: 1px;
	}
	.uni-panel .uni-panel-content image{
		align-items: center;
		width: 70px;
		height: 70px;
		border-radius: 20%;
	}
	.uni-panel .uni-panel-icon{
		position: absolute;
		right: 5%;
	}
</style>
